<template>
	<van-popup v-model:show="state.show" position="bottom" :style="{ height: '40%' }">
		<van-picker :columns="state.list" @confirm="confirm" @cancel="state.show=false" :columns-field-names="{text:state.fieldName,value:'Id'}" />
	</van-popup>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	const state = reactive({
		show: false,
		fieldName: null,
		field: null,
		obj: {},
		list: []
	})

	const emit = defineEmits(['confirm'])

	const props = defineProps({

	})

	const start = (obj, list, field, fieldName) => {
		state.show = true
		state.obj = obj
		state.list = list
		state.field = field
		state.fieldName = fieldName
	}

	const confirm = (val) => {
		state.obj[state.fieldName] = val.selectedOptions[0][state.fieldName]
		if ('Id' in val.selectedOptions[0] == false) state.obj[state.field] = val.selectedOptions[0][state.fieldName]
		if ('Id' in val.selectedOptions[0]) state.obj[state.field] = val.selectedOptions[0].Id
		state.show = false
	}

	defineExpose({
		start
	})
</script>

<style lang="scss" scoped>

</style>